import { message, Spin } from "antd";
import React, {
    useEffect,
    useCallback,
    useLayoutEffect,
    useState,
    useMemo
} from "react";
import { connect, useDispatch } from "react-redux";
import axiosMethod from "../../../../util/axios";
import { LgDrawer, LgPaginationA } from "lancoo-web-ui";
import "./index.scss";
import TableList from "../../../../common/component/fileList";
import Scrollbars from "react-custom-scrollbars";

const columns = [
    {
        key: "index",
        width: "3%",
        textAlign: "center",
        textColor: "#999"
    },
    {
        key: "path",
        width: "47%",
        textAlign: "left",
        padding: "0 20px 0 42px",
        name: "备份文件路径"
    },
    {
        key: "time",
        width: "35%",
        textAlign: "center",
        textColor: "#999",
        name: "备份时间"
    },
    {
        key: "operate_group",
        width: "15%",
        textAlign: "left",
        padding: "0 0 0 20px",
        name: "操作"
    }
]
const pageNum = 11;

function OperateSystem(props){
    let {
        userInfo,
        backupsHistoryInfo
    } = props;
    const dispatch = useDispatch();
    const [appInfo, setAppInfo] = useState({});
    const [loadVisible, setLoadVisible] = useState(true);
    const [moduleList, setModuleList] = useState([]);
    const [total, setTotal] = useState(0);
    const [pageIndex, setPageIndex] = useState(1);

    const closeDrawer = useCallback(() => {
        dispatch({
            type: "SET_BACKUPSHISTORYINFO",
            data: {
                visible: false,
                data: {}
            }
        })
    }, [dispatch]);

    const getAppDetail = useCallback(()=>{
        let url = "api/platformMrg/settings/builtModule/getAppProduct";
        axiosMethod({
            type: "get",
            url,
            noCheck: true,
            body: {
                schoolId: userInfo.schoolId
            },
            callback: function(res, info){
                setLoadVisible(false);
                setModuleList(res.appModuleInfoVoList||[]);
                setAppInfo(res);
            }
        });
    }, [userInfo]);

    const reduction = useCallback((data)=>{
        dispatch({
            type: "SET_ALERTINFO",
            data: {
                title: "delete",
                visible: true,
                data: data.moduleName,
                smallTitle: "删除后可点击添加应用入口按钮重新添加",
                onOk: function(){
                    axiosMethod({
                        type: "delete",
                        url: "api/module/management/manager/delete",
                        body: {
                            id: data.id,
                            moduleId: data.moduleId,
                            schoolId: userInfo.schoolId
                        },
                        header: {
                            "Content-type": "application/x-www-form-urlencoded"
                        },
                        callback: function(res, info){
                            if(info.code === "200"){
                                message.success("删除成功");
                                getAppDetail();
                                typeof window._getLGModuleList === "function" &&
                                window._getLGModuleList();
                                dispatch({
                                    type: "SET_ALERTINFO",
                                    data: {
                                        visible: false,
                                        title: "",
                                        smallTitle: "",
                                        data: {},
                                        onOk: ()=>{},
                                        onCancel: ()=>{}
                                    }
                                })
                            }
                        }
                    });
                    
                },
                onCancel: function(){
                    dispatch({
                        type: "SET_ALERTINFO",
                        data: {
                            visible: false,
                            title: "",
                            smallTitle: "",
                            data: {},
                            onOk: ()=>{},
                            onCancel: ()=>{}
                        }
                    })
                }
            }
        })
    }, [userInfo, getAppDetail, dispatch]);

    const updateModuleList = useMemo(()=>{
        let list = JSON.parse(JSON.stringify(moduleList));
        list.forEach((item, index)=>{
            item.operate_group = (
                <div className="table-btn-group">
                    <span className="blue-btn" onClick={()=>reduction(item)}>还原</span>
                </div>
            )
        })
        return list;
    }, [moduleList, reduction]);

    useLayoutEffect(() => {
        let appId = backupsHistoryInfo.id;
        if(!appId){
            setAppInfo({});
            setModuleList([]);
            setLoadVisible(true);
            return;
        }
        getAppDetail();
        window._getAppDetail = getAppDetail;
    }, [backupsHistoryInfo, userInfo, getAppDetail])
    return (
        <LgDrawer
            type={"right"}
            className="system-detail-drawer"
            visible={backupsHistoryInfo.visible}
            width={850}
            title={"历史记录"}
            closeBtn={closeDrawer}
            showBottomView={false}>
            <Scrollbars>
            <Spin spinning={false} tip="加载中...">
            <div className="drawer-container">
                <div className="app-child-info">
                    <span className="list-num">共<span>{moduleList.length}</span>条记录</span>
                </div>
                <TableList
                tableHeader={columns}
                pageIndex={1}
                pageSize={moduleList.length}
                // getList={changeCount}
                scrollbar={false}
                data={updateModuleList}
                ></TableList>
                {
                    total > pageNum?
                    <div className="menu_pagination">
                        <LgPaginationA
                        total={Math.ceil(total/pageNum)}
                        size="normal"
                        currentPage={pageIndex}
                        onChangePage={(value)=>{
                            setPageIndex(value);
                        }}
                        errorPage={() => {}}
                        ></LgPaginationA>
                    </div>:
                    ""
                }
            </div>
            </Spin>
            </Scrollbars>
        </LgDrawer>
    )
}
const mapToProps = (state) => {
    return {
        sysAddrInfo: state.sysAddrInfo,
        userInfo: state.userInfo,
        appKindList: state.appKindList,
        backupsHistoryInfo: state.backupsHistoryInfo
    }
}
export default connect(mapToProps)(OperateSystem);